<template>
  <div>
    <h1>自定义指令 - 自动获取焦点</h1>
    用户名:  <input v-focus id="inp" type="text">
    <h1>自定义指令 - 修改字体颜色</h1>
    <p v-color="color">我是一个可爱的p</p>
    <button v-color="color='purple'">点我改色</button>
  </div>
</template>

<script>
// 和 Vue 会显得格格不入
// window.onload = function() {
//   // console.log('我执行了')
//   // 此处获取到焦点
//   const input = document.querySelector('#inp')
//   input.focus()
// }
export default {
  // 局部注册的语法
  // directives: {
  //   指令名: {配置对象}
  // },

  directives: {
    // 指令名: focus
    focus: {
      // inserted 函数, 自动执行
      inserted(el) {
        el.focus()
      }
    },
    color:{
      inserted(el,{value}){
        el.style.color = value
      },
      update(el,binding){
        el.style.color = binding.value
      }
    }
  },
  data(){
    return{
      color:'yellowgreen'
    }
  }
}
</script>